<!--
 * @Author: your name
 * @Date: 2022-03-28 08:36:12
 * @LastEditTime: 2022-04-15 09:08:01
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \trace-source-web\src\views\trace-source-manage\components\print\print.vue
-->
<template>
  <div class="dashboard-container">
    <el-button size="small" type="info" @click="print">批量打印</el-button>
    <!-- <el-table :data="tableData" style="width: 100%" border @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" />
      <el-table-column prop="id" label="id" width="180" />
      <el-table-column label="图片" width="180">
        <template slot-scope="scope">
          <img :src="scope.row.src" class="table_img" />
        </template>
      </el-table-column>
      <el-table-column label="操作" width="100">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="print(scope.row)">打印</el-button>
        </template>
      </el-table-column>
    </el-table> -->
    <!--startprint-->
    <div id="printcontent" ref="printcontent">
      <div v-for="item in tableData" :key="item.id" class="print_img">
        <h2>{{ item.batchName }}</h2>
        <p>
          <vue-qr
            class="vue-qr"
            :text="item.downloadData.url"
            :margin="10"
            color-dark="#000"
            color-light="#fff"
            :dot-scale="1"
            :logo-scale="0.2"
            :size="300"
            :logo-src="item.downloadData.icon"
          />
        </p>
      </div>
      <!-- <img v-for="item in tableData" :key="item.id" :src="item.src" class="print_img" /> -->
    </div>
    <!--endprint-->
  </div>
</template>

<script>
import vueQr from "vue-qr";
export default {
  components: { vueQr },
  props: {
    tableData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      multipleSelection: [] // 存放将要打印的数据
    };
  },
  methods: {
    print(row = {}) {
      // if (row.src) {
      //   this.multipleSelection.push(row);
      // }
      this.$nextTick(() => {
        var bdhtml = window.document.body.innerHTML; // 获取body的内容
        var jubuData = document.getElementById("printcontent").innerHTML; // 获取要打印的区域内容
        window.document.body.innerHTML = jubuData;
        window.print(); // 调用浏览器的打印功能
        window.document.body.innerHTML = bdhtml; // body替换为原来的内容
        window.location.reload(); // 刷新页面，如果不刷新页面再次点击不生效或打印使用新窗口实现打印
      });
    }
    // allPrint() {
    //   this.print();
    // }
    // handleSelectionChange(val) {
    //   this.multipleSelection = val;
    // }
  }
};
</script>

<style lang="scss">
.dashboard-container {
  // .table_img {
  //   width: 50px;
  //   height: 50px;
  // }
  #printcontent {
    display: none;
  }
}
//使用媒体查询    设置预览时的样式
@media print {
  @page {
    margin: 0 auto;
    size: landscape; //设置打印布局portrait为纵向；landscape为横向
  }
  #printcontent {
    width: 100%;
    // text-align: center;
  }
  .print_img {
    display: block;
    width: 100%;
    height: 100%;
    border: 1px solid transparent;
    h2 {
      height: 10%;
      text-align: center;
      // font-size: ;
    }
    p:last-child {
      height: 70%;
      text-align: center;
      img {
        height: 100%;
      }
    }
    // img {
    //   height: calc(100%);
    // }
  }
}
</style>
